<template>
  <div id="LetterRight">
    <ul class="Box">
      <li v-for="(item,index) in Letters" :key="index" @click="LetterClick(item)">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
    name:'LetterRight',
    data(){
      return{
        Letters:[],
        showIndex:null
      }
    },
    mounted(){
      for (var i = 0; i < 26; i++) {
        this.Letters.push(String.fromCharCode((65 + i)))
      }
    },
    methods:{
      LetterClick(item){
        var item_id=document.getElementsByClassName(item)[0];
        let AddressMain = document.getElementById('AddressMain')
        console.log(item_id)
        if(item_id != undefined){
          if(this.showIndex==item){
              this.showIndex=null;
          }else{
              this.showIndex=item;
          }
          this.$nextTick(function () {
            // AddressMain.animate({
            //   scrollToP:200
            // },2000)
            AddressMain.scrollTo({"behavior":"smooth","top":item_id.offsetTop});
          })
        }else{
        }
      }
    }

}
</script>

<style scoped lang='less'>
  #LetterRight{
    font-family: PingFangSC-Medium;
    color: #555;
    .Box{
      position: fixed;
      bottom: 150px;
      right: 10px;
      width: 21px;
      z-index: 100;
      text-align: center;
      li{
        height: 35px;
        font-size: 22px;
        line-height: 35px;
      }
    }
  }
</style>
